<template>
    <div class="Catalogue">
        <div class="Nav">
            <van-icon name="arrow-left" @click="back" />
            <div class="title">目录</div>
        </div>
        <!-- 上部分 -->
        <div class="TopContent" v-for="(item, index) in BookMsg" :key="index">
            <div class="img-box">
                <img :src="item.coverImage" class="img-auto" />
            </div>
            <div class="name-author">
                <div class="name">{{ item.title }}</div>
                <div class="author">{{ item.author }}</div>
            </div>
        </div>
        <!-- 中部分 -->
        <div class="MiddleContent">
            <div class="totalChapterQuantity">共{{ totalChapterQuantity }}章</div>
            <!-- 正序倒序 -->
            <div class="reverse" @click="overturn" v-if="reverseflag">
                倒序
                <van-icon name="arrow-up" />
            </div>
            <div class="reverse" @click="overturn" v-else>
                正序
                <van-icon name="arrow-down" />
            </div>
        </div>
        <!-- 下部分 -->
        <div class="bottomContent">
            <div class="bottomContent-item" v-for="(item, index) in ChapterList" :key="index" @click="GoBookContent(BookId, item.uuid, item.needPay)">
                {{ item.title }}
                <div v-if="item.needPay">
                    <van-icon name="lock" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from "vant";

export default {
    name: "Catalogue",
    data() {
        return {
            BookId: null,
            // 书籍信息
            BookMsg: null,
            // 目录章数
            totalChapterQuantity: null,
            // 目录数组
            ChapterList: null,
            // 翻转标识符
            reverseflag: false,
            isLogined: null,
        };
    },
    created() {
        // 接收书籍Id
        this.BookId = this.$route.query.BookId;
        this.getCatalogueData();
    },
    methods: {
        back() {
            this.$router.back();
        },
        // 请求目录数据
        getCatalogueData() {
            this.axios({
                method: "get",
                url: "reader/book/info.json",
                params: {
                    source_uuid: this.BookId,
                },
            })
                .then((res) => {
                    //
                    // this.firstTitle = res.data.data.catalog[0].title;

                    this.BookMsg = [res.data.data.book];

                    // (this.BookMsg);
                    this.totalChapterQuantity = res.data.data.catalog.length;

                    this.ChapterList = res.data.data.catalog;

                    // 第一章id
                    // this.firstId = this.ChapterList[0].uuid;
                    // res.data.data.catalog.forEach((item) => {
                    //     (item);
                    // });
                })
                .catch((err) => {
                    err;
                });
        },
        // 目录倒序
        overturn() {
            this.ChapterList.reverse();
            // 翻转标识符
            this.reverseflag = !this.reverseflag;
        },
        // 跳转书本内容页
        GoBookContent(BookId, uuid, needPay) {
            if (needPay) {
                Toast.fail("该章节为付费章节");
                return;
            } else {
                this.$router.push({
                    name: "BookContent",
                    query: {
                        BookId,
                    },
                });
            }
        },
    },
};
</script>

<style lang="less" scoped>
.Catalogue {
    .bottomContent {
        width: 350px;
        margin: 0 auto;
        // overflow-y: auto;
        .bottomContent-item {
            height: 50px;
            border-bottom: 1px dashed #686969;
            font-size: 14px;
            line-height: 50px;
            padding-left: 15px;
            display: flex;
            justify-content: space-between;
        }
    }
    .MiddleContent {
        width: 350px;
        margin: 20px auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .reverse {
            width: 1.06667rem;
            height: 20px;
            border-radius: 0.26667rem;
            border: 0.02667rem solid;
            padding-left: 0.13333rem;
            padding-right: 3px;
            line-height: 20px;
            color: #919292;
        }
        .totalChapterQuantity {
            font-size: 14px;
        }
    }
    .TopContent {
        width: 350px;
        margin: 0 auto;
        display: flex;
        margin-top: 30px;
        .img-box {
            width: 60px;
            height: 80px;
        }
        .name-author {
            margin: 20px 0 0 20px;
            .name {
                font-size: 16px;
            }
            .author {
                margin-top: 10px;
                color: #818383;
            }
        }
    }
    .Nav {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cdd9d9;
        .van-icon-arrow-left {
            font-size: 20px;
            margin: 0 125px 0 10px;
        }
        .title {
            font-size: 18px;
        }
    }
}
</style>
